<template>
  <div class="drug">
    <el-form :model="form" label-width="auto">
      <el-form-item label="状态:">
        <el-radio-group v-model="form.resource">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">下架</el-radio>
          <el-radio value="2">关闭</el-radio>
        </el-radio-group>
        <!-- <el-input v-model="form.name" /> -->
      </el-form-item>
      <el-form-item label="定时关闭:">

      </el-form-item>
      <el-form-item label="关闭提示语:">
        <el-input v-model="form.name" type="text" maxlength="40" show-word-limit />
      </el-form-item>
      <el-form-item label="药房对外展示名称:">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="请选择特殊煎煮:">
        <el-checkbox-group v-model="form.type">
          <el-checkbox value="Online activities" name="type">
            煎煮
          </el-checkbox>
          <el-checkbox value="Promotion activities" name="type">
            后煎
          </el-checkbox>
          <el-checkbox value="Offline activities" name="type">
            先煎
          </el-checkbox>
          <el-checkbox value="Simple brand exposure" name="type">
            生吃
          </el-checkbox>
          <el-checkbox value="Simple brand exposure" name="type">
            煎炒
          </el-checkbox>
          <el-checkbox value="Simple brand exposure" name="type">
            浓煎
          </el-checkbox>
        </el-checkbox-group>
        <div class="tip">特殊煎煮额外收取加工费用<el-input v-model="form.name" style="width: 160px;" /> 元/剂</div>
      </el-form-item>
      <el-form-item label="请选择加工方式:">
        <el-checkbox-group v-model="checkList">
          <div class="content">
            <div class="header" @click="openCollapse(1)">
              <el-checkbox value="Value A" label="饮片" />
              <img class=" rightIcon" src="/src/assets/right.png" alt="">
            </div>
            <div v-if="openCollapse1" :class="openCollapse1?'collapse':'nocollapse'">
              <Form1></Form1>
            </div>
          </div>
          <div class="content">
            <div class="header" @click="openCollapse(2)">
              <el-checkbox value="Value B" label="水丸" />
              <img class="rightIcon" src="/src/assets/right.png" alt="">
            </div>
            <div v-if="openCollapse2" :class="openCollapse2?'collapse':'nocollapse'">
              <Form2></Form2>
            </div>
          </div>
          <div class="content">
            <div class="header" @click="openCollapse(3)">
              <el-checkbox value="Value B" label="膏方" />
              <img class="rightIcon" src="/src/assets/right.png" alt="">
            </div>
            <div v-if="openCollapse3" :class="openCollapse3?'collapse':'nocollapse'">
              <Form3></Form3>
            </div>
          </div>
          <div class="content">
            <div class="header" @click="openCollapse(4)">
              <el-checkbox value="Value B" label="粉剂" />
              <img class="rightIcon" src="/src/assets/right.png" alt="">
            </div>
            <div v-if="openCollapse4" :class="openCollapse4?'collapse':'nocollapse'">
              <Form4></Form4>
            </div>
          </div>
          <div class="content">
            <div class="header" @click="openCollapse(5)">
              <el-checkbox value="Value B" label="水丸" />
              <img class="rightIcon" src="/src/assets/right.png" alt="">
            </div>
            <div v-if="openCollapse5" :class="openCollapse5?'collapse':'nocollapse'">
              <Form5></Form5>
            </div>
          </div>
          <div class="content">
            <div class="header" @click="openCollapse(6)">
              <el-checkbox value="Value B" label="水丸" />
              <img class="rightIcon" src="/src/assets/right.png" alt="">
            </div>
            <div v-if="openCollapse6" :class="openCollapse6?'collapse':'nocollapse'">
              <Form6></Form6>
            </div>
          </div>
          <div class="content">
            <div class="header" @click="openCollapse(7)">
              <el-checkbox value="Value B" label="水丸" />
              <img class="rightIcon" src="/src/assets/right.png" alt="">
            </div>
            <div v-if="openCollapse7" :class="openCollapse7?'collapse':'nocollapse'">
              <Form7></Form7>
            </div>
          </div>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

  </div>
</template>

<script setup>
  import Form1 from './form1.vue'
  import Form2 from './form2.vue'
  import Form3 from './form3.vue'
  import Form4 from './form4.vue'
  import Form5 from './form5.vue'
  import Form6 from './form6.vue'
  import Form7 from './form7.vue'
  import {
    ref,
    reactive
  } from 'vue'

  import {
    ElCheckbox
  } from "element-plus";

  const checkList = ref([])
  const activeNames = ref(['1'])
  const openCollapse1 = ref(false)
  const openCollapse2 = ref(false)
  const openCollapse3 = ref(false)
  const openCollapse4 = ref(false)
  const openCollapse5 = ref(false)
  const openCollapse6 = ref(false)
  const openCollapse7 = ref(false)
  const handleChange = (val) => {
    console.log(val)
  }
  const openCollapse = (index) => {
    console.log(index)
    if (index == 1) {
      openCollapse1.value = !openCollapse1.value
    } else if (index == 2) {
      openCollapse2.value = !openCollapse2.value
    } else if (index == 3) {
      openCollapse3.value = !openCollapse3.value
    } else if (index == 4) {
      openCollapse4.value = !openCollapse4.value
    } else if (index == 5) {
      openCollapse5.value = !openCollapse5.value
    } else if (index == 6) {
      openCollapse6.value = !openCollapse6.value
    } else if (index == 7) {
      openCollapse7.value = !openCollapse7.value
    }
  }


  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  const onSubmit = () => {
    console.log('submit!')
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header {
    background: #f6faff !important;
    padding: 0px 15px;
    color: #373737;
  }

  ::v-deep .el-collapse-item__content {
    padding: 20px 40px;
  }

  ::v-deep .el-checkbox-group {
    width: 100%;
  }

  .content {}

  .header {
    background: #f6faff;
    padding: 6px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .rightIcon {
    width: 16px;
    height: 16px;
  }

  .collapse {
    padding: 40px 14px;
    // display: none;
    background: #f9b3cc;
  }

  .nocollapse {
    display: none;
  }
</style>